<template>
  <div class="demo">
    <div class="demo-title">大数据</div>
    <div class="demo-content">
      <h2>{{ state.options.length }} Items</h2>
      <Select
        v-model:value="state.value"
        mode="multiple"
        style="width: 100%"
        placeholder="Please select"
        :options="state.options"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Select from '@sscd/select';
  const options: { value: string; disabled: boolean }[] = [];
  for (let i = 0; i < 100000; i++) {
    options.push({ value: `${i.toString(36)}${i}`, disabled: i === 10 });
  }
  const state = reactive({ options, value: ['a10', 'c12'] });
</script>
